<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>莞工零食商城</title>
    <link rel="shortcut icon" href="/static/user/images/guangong.ico">
    <link rel="stylesheet" href="/static/user/css/reset.css">
    <link rel="stylesheet" href="/static/user/css/common.css">
    <link rel="stylesheet" href="/static/user/css/cxls.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2077656_2e8zh7v902g.css">
    <style>
        .category{
            height: 400px;
            width: 1215px;
            position: relative;
            margin-bottom: 20px;
            background-color: #ffffff;
        }
        .category-left-side{
            width: 250px;
            height: 400px;
            border-bottom: 1px solid #bbb9b9;
            box-sizing: border-box;
            background-color: #cccccc;
            margin-right: 15px;
        }
        .category-left-side-title{
            height: 76px;
            width: 250px;
            line-height: 76px;
            background-color: #CB2F30;
            text-align: center;
            font-size: 24px;
            color: #ffffff;
        }
        .meat-fenlei{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            color: #333333;
            border-bottom: 1px dashed #eeeeee;
            box-sizing: border-box;
        }
        .meat-fenlei:hover{
            background-color: #eeeeee;
        }
        .category-right-side{
            width: 935px;
            height: 400px;
            background-color: #fff;
            overflow-y: scroll;
        }
        .category-right-side::-webkit-scrollbar{
            width: 5px;
            background-color: #eeeeee;
        }
        .category-right-side::-webkit-scrollbar-track{
            border-radius: 10px;
            background: rgba(0,0,0,0.1);
        }
        .category-right-side::-webkit-scrollbar-thumb{
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
        }
        .mr-item{
            width: 179px;
            height: 179px;
            background-color: #ffffff;
            padding: 8px 19px;
            box-sizing: content-box;
            border: 1px solid #ccc;
            display: inline-block;
            margin-right: 10px;
        }
        .mr-item a{
            display: inline-block;
            height: 184px;
            width: 179px;
        }
        .mr-item .pic{
            width: 179px;
            height: 130px;
        }
        .mr-item .pic:hover{
            transform: translateX(5px);
            transition: all .3s;
        }
        .mr-item p{
            width: 179px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            white-space: nowrap;;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 5px 0 10px 0;
        }
        .mr-item .price{
            color: #CB2F30;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 头部logo、搜索框、导航栏 -->
    {include file="common/header"}
     <!-- 轮播图 -->
     <div id="banner" class="minwidth">
        <a href=""><div id="image"></div></a>
        <div id="slide">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </div>
        <div class="turn" id="turn-left" onclick="turnleft();">
            <i class="iconfont icon-ziyuanldpi1"></i>
        </div>
        <div class="turn" id="turn-right" onclick="turnright();">
            <i class="iconfont icon-ziyuanldpi"></i>
        </div>
    </div>
    <!-- 中部 -->
    <div class="middle">
        <div class="middle-container">
            <!-- 天天惊喜 -->


            <!-- 新品上市 -->
            <div id="news" class="minwidth clearfix">
                <div class="news-left left clearfix">
                    <img src="/static/user/images/news.jpg" alt="">
                </div>
                <div class="news-right right clearfix">
                    <div class="news-right-title">
                        <div class="title-item left clearfix" style="font-size: 18px;">
                            刚出炉新品
                        </div>
                    </div>
                    <ul class="news-list">
                       {volist name="twonews" id="tn"}
                        <li class="news-list-item clearfix">
                            <a href="/user/index/getgoodsdetail?id={$tn.id}" class="nl-item-logo">
                                <img src="/static/admin/uploads/{$tn.thumb}" alt="" title="{$tn.goods_name}">
                            </a>
                            <div class="nl-item-right right clearfix">
                                <a href="/user/index/getgoodsdetail?id={$tn.id}">{$tn.goods_name}</a>
                                <div class="nl-item-price clearfix">
                                    <span class="nl-xianjia">￥{$tn.sale_price}元</span>
                                    <span class="nl-yuanjia">原价:￥{$tn.market_price}元</span>
                                    <button class="nl-item-btn right clearfix" onclick='window.location.href="/user/index/getgoodsdetail?id={$tn.id}" '>立即抢购</button>
                                    <span class="nl-item-num right clearfix">销量：<span >{$tn.sale_num}</span>件</span>
                                </div>
                            </div>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
            <!-- 特卖专区 -->
            <!-- <div id="temai">
                <ul class="temai-container">
                    <li class="temai-item clearfix">
                        <a href=""><img src="./images/temai1.jpg" alt=""></a>
                    </li>
                    <li class="temai-item clearfix">
                        <a href=""><img src="./images/temai2.jpg" alt=""></a>
                    </li>
                    <li class="temai-item clearfix">
                        <a href=""><img src="./images/temai3.jpg" alt=""></a>
                    </li>
                    <li class="temai-item clearfix">
                        <a href=""><img src="./images/temai4.jpg" alt=""></a>
                    </li>
                </ul>
            </div> -->
            <!-- 特色肉食 -->
            <div class="category minwidth" id="meat">
                <div class="category-left-side left clearfix">
                    <h1 class="category-left-side-title">特色肉食</h1>
                    <ul class="meat-category">
                        {volist name="meet" id="me"}
                        <a href="###" onclick="findmeat(this,{$me.id})"><li class="meat-fenlei">{$me.cate_name}</li></a>
                       {/volist}
                    </ul>
                </div>
                <div class="right clearfix">
                    <ul class="meat-right-side">
                        {volist name="$meetgoods" id="m"}
                        <li class="mr-item">
                            <a href="/user/index/getgoodsdetail?id={$m.id}">
                                <div class="pic">
                                    <img src="/static/admin/uploads/{$m.thumb}" alt="">
                                </div>
                                <p>{$m.goods_name}</p>
                                <p class="price">￥{$m.sale_price}元</p>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
                <div class="category minwidth" id="penghua_food">
                    <div class="category-left-side left clearfix">
                        <h1 class="category-left-side-title">膨化食品</h1>
                    <ul class="meat-category">
                        {volist name="$penghua" id="pen"}
                        <a href="###" onclick="findpenghua(this,{$pen.id})"><li class="meat-fenlei">{$pen.cate_name}</li></a>
                        {/volist}
                    </ul>
                </div>
                <div class="right clearfix">
                    <ul class="meat-right-side">
                        {volist name="$penghuagoods" id="p"}
                        <li class="mr-item">
                            <a href="/user/index/getgoodsdetail?id={$p.id}">
                                <div class="pic">
                                    <img src="/static/admin/uploads/{$p.thumb}" alt="">
                                </div>
                                <p>{$p.goods_name}</p>
                                <p class="price">￥{$p.sale_price}元</p>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
            <div class="category minwidth" id="ganguo_food">
                <div class="category-left-side left clearfix">
                    <h1 class="category-left-side-title">干果类</h1>
                    <ul class="meat-category">
                        {volist name="ganguo" id="g"}
                        <a href="###" onclick="findganguo(this,{$g.id})"><li class="meat-fenlei">{$g.cate_name}</li></a>
                        {/volist}
                    </ul>
                </div>
                <div class="right clearfix">
                    <ul class="meat-right-side">
                        {volist name="ganguogoods" id="gan"}
                        <li class="mr-item">
                            <a href="/user/index/getgoodsdetail?id={$gan.id}">
                                <div class="pic">
                                    <img src="/static/admin/uploads/{$gan.thumb}" alt="">
                                </div>
                                <p>{$gan.goods_name}</p>
                                <p class="price">￥{$gan.sale_price}元</p>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    {include file="common/footer"}
    <!-- 右下角固定列表 -->
    <div id="fixed-list">
        <a class="fixed-list-item" href="#news">新品上市</a>
        <a class="fixed-list-item" href="#meat">特色肉食</a>
        <a class="fixed-list-item" href="#penghua_food">膨化食品</a>
        <a class="fixed-list-item" href="#ganguo_food">干果类</a>
        <a class="fixed-list-item" onclick="window.location.href='/user/chat/kefu'">在线客服</a>
        <a class="ret" onclick="backtoTop();">
            <img src="/static/user/images/gotop.png" alt="">
        </a>
    </div>
</body>
<script src="/static/user/js/jquery-3.4.1.js"></script>
<script>
    //json = JSON.parse({$alter});
     $(function(){
 
         // function escape2Html(str) {
         //     var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
         //     return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
         // }
         // $a=escape2Html("&quo");
         //$a={$alter};
 
         json = "{$alter}".replace(/&quot;/g,"\"");
         json=JSON.parse(json);
         //console.log(json[0]);
         //JSON.parse({$alter});
         //console.log(da);
         //var mycars=new Array();
         $("#banner #image").css("background","url('/static/admin/uploads/"+json[0].img_src+"')").css("background-size","cover");
         $("#banner #image").parent().attr('href',json[0].url_link);
         $("#slide").find('a').eq(0).addClass("focuson");
     });
 
     //轮播图
     var timer;
     var index = 1;
 
     timer = setInterval(function(){
         //console.log(($("#slide").find('a').length));
         if(index > ($("#slide").find('a').length - 1)){
             // clearInterval(timer);
             index = 0;
             // return false;
         }
         $("#slide").find('a').eq(index-1).removeClass("focuson");
         $("#slide").find('a').eq(index).addClass("focuson");
         $("#banner #image").css("background","url('/static/admin/uploads/"+json[index].img_src+"')").css("background-size","cover");
         $("#banner #image").parent().attr('href',json[index].url_link);
         //console.log(index);
         ++index;
 
     }, 2000);
     // 左右按钮切换图片
     // 向左切换图片
     function turnleft(){
         var x = index - 1;
         if(x == 0){
             $("#slide").find('a').eq(0).removeClass("focuson");
             $("#slide").find('a').eq($("#slide").find('i').length-1).addClass("focuson");
             // $("#banner #image").css("background","url('./static/userimages/banner"+ ($("#slide").find('a').length-1) +".jpg").css("background-size","cover");
             $("#banner #image").css("background","url('/static/admin/uploads/"+json[($("#slide").find('a').length-1)].img_src+"')").css("background-size","cover");
             $("#banner #image").parent().attr('href',json[($("#slide").find('a').length-1)].url_link);
             index = $("#slide").find('a').length - 1;
 
             index++;
         }
         else{
             $("#slide").find('a').eq(x).removeClass("focuson");
             $("#slide").find('a').eq(x-1).addClass("focuson");
             // $("#banner #image").css("background","url('/static/user/images/banner"+ (x-1) +".jpg").css("background-size","cover");
             $("#banner #image").css("background","url('/static/admin/uploads/"+json[(x-1)].img_src+"')").css("background-size","cover");
             $("#banner #image").parent().attr('href',json[(x-1)].url_link);
             index--;
         }
     }
     // 向右切换图片
     function turnright(){
         if(index == $("#slide").find('a').length){
             $("#slide").find('a').eq(index-1).removeClass("focuson");
             $("#slide").find('a').eq(0).addClass("focuson");
             //$("#banner #image").css("background","url('./images/banner"+ 0 +".jpg").css("background-size","cover");
             $("#banner #image").css("background","url('/static/admin/uploads/"+json[0].img_src+"')").css("background-size","cover");
             $("#banner #image").parent().attr('href',json[0].url_link);
             index = 0;
             index++;
         }
         else{
             $("#slide").find('a').eq(index-1).removeClass("focuson");
             $("#slide").find('a').eq(index).addClass("focuson");
            // $("#banner #image").css("background","url('/static/user/images/banner"+ index +".jpg").css("background-size","cover");
             $("#banner #image").css("background","url('/static/admin/uploads/"+json[index].img_src+"')").css("background-size","cover");
             $("#banner #image").parent().attr('href',json[index].url_link);
             index++;
         }
     }
     // hover到圆点上、切换到相应图片
     function hoveron(){
         $("#slide a").hover(function(){ 
         var hov = $("#slide a").index(this);
         $("#slide").find('a').eq(index-1).removeClass("focuson");
         $("#slide").find('a').eq(hov).addClass("focuson");
         //$("#banner #image").css("background","url('/static/user/images/banner"+ hov +".jpg").css("background-size","cover");
         $("#banner #image").css("background","url('/static/admin/uploads/"+json[hov].img_src+"')").css("background-size","cover");
             $("#banner #image").parent().attr('href',json[hov].url_link);
         index = hov;
         index++;
     }); 
     }
     // 鼠标进出轮播图区域、控制轮播图播放
     $("#banner").mouseenter(function(){
         clearInterval(timer);
     }).mouseleave(function(){
         timer = setInterval(function(){
         if(index > ($("#slide").find('a').length - 1)){
             // clearInterval(timer);
             index = 0;
             // return false;
         }
         $("#slide").find('a').eq(index-1).removeClass("focuson");
         $("#slide").find('a').eq(index).addClass("focuson");
         //$("#banner #image").css("background","url('/static/user/images/banner"+ index +".jpg").css("background-size","cover");
         $("#banner #image").css("background","url('/static/admin/uploads/"+json[index].img_src+"')").css("background-size","cover");
             $("#banner #image").parent().attr('href',json[index].url_link);
         ++index;
 
     }, 2000);
     })
     hoveron();
 
     //右下角固定列表返回顶部 
     function backtoTop(){
         $("body,html").animate({scrollTop:'0px'},2000);
     }
     // 滚动条下拉后显示固定列表
     function show(){
         $(window).scroll(function(){
             if($(window).scrollTop() > 200){
                 $("#fixed-list").fadeIn(1000);
             }
             else{
                 $("#fixed-list").fadeOut(1000);
             }
         })
     }
     show();

    function findpenghua(_this,id) {
        $.ajax({
            url:'/user/index/findpenghua',
            type:'post',
            data:{
                'id':id
            },
            dataType:'JSON',
            success:function (res) {
               console.log(res);
               volist(res,_this);
            }
        })
    }

    function findmeat(_this,id) {
        $.ajax({
            url:'/user/index/findmeat',
            type:'post',
            data:{
                'id':id
            },
            dataType:'JSON',
            success:function (res) {
                volist(res,_this);
            }
        })
    }

    function findganguo(_this,id) {
        $.ajax({
            url:'/user/index/findganguo',
            type:'post',
            data:{
                'id':id
            },
            dataType:'JSON',
            success:function (res) {
                volist(res,_this);
            }
        })
    }

    function volist(res,_this) {
        if (res['data'].length==0){
            $(_this).parent().parent().siblings('.right').find('ul').html('');
        }
        for (let index = 0; index < res['data'].length; index++) {
                
            //console.log(res['data'][index].goods_name);
            $(_this).parent().parent().siblings('.right').find('ul').html('');
            
            $(_this).parent().parent().siblings('.right').find('ul').append(`<li class="mr-item">
                                                <a href="/user/index/getgoodsdetail?id=`+res['data'][index].thumb+`">
                                                    <div class="pic">
                                                        <img src="/static/admin/uploads/`+res['data'][index].thumb+`" alt="">
                                                    </div>
                                                    <p>`+res['data'][index].goods_name+`</p>
                                                    <p class="price">￥`+res['data'][index].sale_price+`元</p>
                                                </a>
                                            </li>`);
        }
    }
 </script>
</html>